import React, { Component, PureComponent } from "react";
import {View,Text,StyleSheet,StatusBar,Image,Animated,TouchableWithoutFeedback} from 'react-native'
import  LinearGradient from 'react-native-linear-gradient';
import ScrollableTabView, { ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';
import {statusBarHeight,width} from '../../util/apdater_util';
import PropTypes from "prop-types";
import { transform } from "@babel/core";
import SiftPage from '../../page/knowledge/sift_page'
import InfoPage from '../../page/knowledge/info_page'
import KnowledgeList from '../../page/knowledge/knowledgeList'

class NavBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes={
    callBack:PropTypes.func
  }
  render() {
    return (
      <TouchableWithoutFeedback onPress={this.props.callBack}>
        <View style={styles.navBar}>
          <Image style={styles.headerIcon} source={require('../../img/home_header_icon.png')}></Image>
          <View style={styles.searchBar}>
            <Text style={styles.textPlacer}>羊毛汗</Text>
            <LinearGradient colors={['#e79c58','#f8da85']} start={{x:0,y:1}} style={styles.searchIconBox}>
              <Image style={styles.searchIcon} source={require('../../img/home_header_search.png')}></Image>
            </LinearGradient>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

class CustomTabBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    tabLabelNames: PropTypes.array, // tabs
    goToPage: PropTypes.func, // 跳转到对应tab的方法
    tabs: PropTypes.array,
    activeTab: PropTypes.number,
    onPress:PropTypes.func
  }
  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const translateX = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, containerWidth / numberOfTabs],
    });
    return (
      <View style={[this.props.style,styles.tabs]}>
        {this.props.tabs.map((tab,i)=>{
          return <TouchableWithoutFeedback style={styles.tabBox} key={tab} onPress={()=>this.props.goToPage(i)}>
             <View style={styles.tabBox}>
               <Text style={[styles.tab,i === this.props.activeTab?{fontSize:19,color:'#222222'}:{}, this.props.textStyle]}>{this.props.tabLabelNames[i].label}</Text>
               {i===this.props.activeTab?<Image style={styles.lineBar}  source={require('../../img/line_bar.png')}></Image>:null}
             </View>
          </TouchableWithoutFeedback>
        })}
      </View>
    );
  }
}



class Home_page extends Component{
  tabView = null;
  constructor(props) {
    super(props);
    this.state={
      page:0,
      tabList:[{
        label:'精选',
        index:1
      },{
        label:'资讯',
        index:2
      },{
        label:'知识',
        index:3
      }]
    }
  }
  componentDidMount() {

  }

  onChangeTab(obj){
    console.log(obj)
    // this.setState({page:1})
  }
  selectTabChange(i){
    // console.log(1111)
    // this.setState({page:1})
    console.log(this.tabView)
    // if (this.tabView) this.tabView.scrollView.scrollTo({x:i*width,y:0,duration: 1,
    //   animated: true})
    if(this.tabView)this.tabView.goToPage(i)

  }

  render(){
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor='transparent' translucent barStyle={'dark-content'} />
        <View style={{marginTop: statusBarHeight}}></View>
        <NavBar callBack={()=>{this.props.navigation.navigate('searchPage',{})}}></NavBar>
        <ScrollableTabView initialPage={0} ref={(tabView) => { this.tabView = tabView; }} prerenderingsiblingsNumber={1} scrollWithoutAnimation={false} onChangeTab={this.onChangeTab} onScroll={
          (position) => {
            console.log('滑动时的位置：' + position);
          }
        } locked={false} renderTabBar={()=><CustomTabBar tabLabelNames={this.state.tabList} onPress={this.selectTabChange}/>}>
          <View tabLabel="Tab1" style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <SiftPage></SiftPage>
            </View>
          </View>
          <View tabLabel='Tab2' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <InfoPage></InfoPage>
            </View>
          </View>
          <View tabLabel='Tab3' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <KnowledgeList></KnowledgeList>
            </View>
          </View>
        </ScrollableTabView>
      </View>
    )
  }
}
export default module=Home_page

const styles=StyleSheet.create({
  container:{
    backgroundColor:'white',
    height:'100%',
    flex:1
  },
  navBar:{
    height:44,
    backgroundColor: '#fff',
    flexDirection:'row',
    alignItems:'center'
  },
  searchBar:{
    height:38,
    flex:1,
    borderRadius:19,
    borderStyle:'solid',
    borderColor:'#e79c58',
    borderWidth:1,
    marginLeft:15,
    marginRight:15,
    flexDirection:'row',
    alignItems: 'center',
    paddingLeft:19
  },
  searchIconBox:{
    width:29,
    height:29,
    borderRadius:15,
    marginRight: 5
  },
  textPlacer:{
    flex:1,
    color:'#9E9FA1',
    fontSize:14
  },
  searchIcon:{
    width:13,
    height:13,
    transform:[{translateX:8},{translateY:8}]
  },
  headerIcon:{
    width:42,
    height:35
  },
  /**tab**/
  tabs:{
    height:40,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
  },
  tabBox:{
    height:40,
    justifyContent: 'center',
    alignItems:'center'
  },
  tab:{
    color: '#666666',
    fontSize: 16,
    paddingLeft: 10,
    paddingRight:10
  },
  lineBar:{
    position:'absolute',
    width:20,
    height:3,
    bottom:0,
  }
})
